<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>校内经历</title>
    <link rel="shortcut icon" href="../../image/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <link href="../../css/time/css/base.css" rel="stylesheet">
    <link href="../../css/time/css/index.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-container">
        <!--  校内经历   -->
        <div class="layui-card" style="margin-top: 15px">
            <div class="layui-card-header"><b style="font-size: 18px">校内经历</b></div>
            <div class="layui-card-body">
                <!--                <form class="layui-form" action="">-->
                <div class="layui-form-item">
                    <label class="layui-form-label">校内经历</label>
                    <div class="layui-input-block">
                        <textarea type="text" id="wordtext" name="eventContent" placeholder="请简述校内经历,最多160字"
                                  class="layui-textarea"
                                  maxlength="160" style="resize: none;font-size: 18px;"></textarea>
                        <span id="wordage">还可输入160字</span>
                        <script src="../../js/jquery-3.5.1.js"></script>
                        <script>
                            $(document).ready(function () {
                                var limitNum = 160;
                                var pattern = '还可以输入' + limitNum + '字';
                                $('#wordage').html(pattern);
                                $('#wordtext').keyup(
                                    function () {
                                        var remain = $(this).val().length;
                                        if (remain > 160) {
                                            pattern = "字数超过160个限制";
                                        } else {
                                            var result = limitNum - remain;
                                            pattern = '还可以输入' + result + '字';
                                        }
                                        $('#wordage').html(pattern);
                                    }
                                );
                            })
                        </script>
                    </div>
                </div>
                <!--  时间     -->
                <div class="layui-form-item">
                    <label class="layui-form-label">时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="eventTime" autocomplete="off" required lay-verify="required"
                               class="layui-input" id="eventTime">
                    </div>
                </div>
                <!--  附件资源       -->
                <div class="layui-form-item">
                    <label class="layui-form-label">附件</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="closure">
                            <i class="layui-icon">&#xe67c;</i>选择图片
                        </button>
                        <img id="qrshow" alt="未选择图片" style="width:99.8%;height: 99.8%"/>
                        <input type="hidden" name="eventenclosure" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" id="upclosure">提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                <!--                </form>-->
            </div>
        </div>
        <!--      校内经历时间轴   -->
        <div class="layui-card" style="margin-top: 15px">
            <div class="layui-card-header"><b style="font-size: 18px">校内经历一览</b></div>
            <div class="layui-card-body">
                <article class="timemain">
                    <div class="container">
                        <ul class="cbp_tmtimeline" id="eventrender">

                        </ul>
                    </div>
                </article>
            </div>
        </div>
    </div>

</div>
<!--2017-10-10-->
<script id="eventypl" type="text/html">
    {{#  layui.each(d.list, function(index,item){ }}
    <li>
        <time class="cbp_tmtime">
            <span>{{ (item.eventtime).substring(5,7) }}-{{ (item.eventtime).substring(8,10) }}</span> <span>{{ (item.eventtime).substring(0,4) }}</span>
        </time>
        <div class="cbp_tmicon"></div>
        <div class="cbp_tmlabel"
             data-scroll-reveal="enter right over 1s">
            <h2>校内经历</h2>
            <p><span class="blogpic"><img src="{{item.eventenclosure}}"></span>{{item.eventcontent}}
            </p>
            <a href="javascript:;" class="readmore" title="{{item.eventid}}">删除&gt;&gt;</a>
        </div>
    </li>
    {{#  }); }}
    {{#  if(d.list.length === 0){ }}
    <li>
        <time class="cbp_tmtime">
            <span>00-00</span> <span>0000</span>
        </time>
        <div class="cbp_tmicon"></div>
        <div class="cbp_tmlabel"
             data-scroll-reveal="enter right over 1s">
            <h2>无校内经历数据</h2>
        </div>
    </li>
    {{#  } }}
</script>
</body>
<script src="../../libs/layui/layui.js"></script>
<script src="../../js/scrollReveal.js"></script>
<script src="../../js/model.js"></script>
<script>
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        (function () {
            window.scrollReveal = new scrollReveal({reset: true});
        })();
    }
</script>
<script>
    layui.use(['laytpl', 'layer', 'form', 'layarea', 'upload', 'jquery', 'element', 'laydate', 'okLayer'], function () {
        let layer = layui.layer;
        let form = layui.form;
        let upload = layui.upload;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        let laytpl = layui.laytpl;
        let okLayer = layui.okLayer;

        // 获取contentText
        const ctx = function () {
            let pathName = document.location.pathname;
            let index = pathName.substr(1).indexOf("/");
            let result = pathName.substr(0, index + 1);
            return result;
        }();

        // 获取student
        var student = JSON.parse(window.sessionStorage.getItem("student"));

        var geventypl = document.getElementById("eventypl").innerHTML;
        loadeventdata();

        //文件上传
        var uploadInst = upload.render({
            elem: '#closure' //绑定元素
            , url: ctx + '/upload////singleImageUpload' //上传接口
            , accept: 'images'
            , acceptMime: 'image/jpeg'
            , exts: 'png|jpg|jpeg'//只允许上传图片文件
            , auto: false
            , bindAction: '#upclosure'
            , data: {diridentity: student.stuid}
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#qrshow').attr('src', result); //图片链接（base64）
                    if (file == null) {
                        layer.msg("请选择图片");
                    }
                });
            }, before: function () {
                var eventContent = $("[name='eventContent']").val();
                var eventTime = $("[name='eventTime']").val();
                if (eventContent == "") {
                    layer.msg("内容不能为空", {icon: 7});
                    $("[name='eventContent']").focus();
                    stopPropagation();
                }
                if (eventTime == "") {
                    layer.msg("时间不能为空", {icon: 7});
                    stopPropagation();
                }

            }, done: function (res) {
                //上传完毕回调
                $("[name='eventenclosure']").attr('value', res.data.src);
                console.log($("[name='eventenclosure']").val())
                addevent();
            }, error: function () {
                //请求异常回调
                console.log("askahscascas")
            }
        });

        //  时间选择
        laydate.render({
            elem: '#eventTime' //指定元素
            , range: false //范围选择
            , min: -1460 //最小4年前
            , max: 0 //不能超过当前日期
        });

        //添加校内经历
        function addevent() {
            var eventContent = $("[name='eventContent']").val();
            var eventTime = $("[name='eventTime']").val();
            var eventenclosure = $("[name='eventenclosure']").val();
            var loadindex;
            if (eventenclosure == "") {
                okLayer.yellowSighMsg("图片上传失败,请重试", function () {
                    location.reload();
                })
            } else {
                var stuevent = new Event(null, eventContent, eventTime, eventenclosure, student);
                console.log(JSON.stringify(stuevent))
                $.ajax({
                    url: ctx + "/ygssecs/addstuEvent",
                    type: 'GET',
                    dataType: 'JSON',
                    data: {stueventjson: JSON.stringify(stuevent)},
                    beforeSend: function () {
                        loadindex = layer.load(1);
                    }
                }).done(function (res) {
                    layer.close(loadindex);
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                            location.reload();
                        })
                    } else {
                        layer.msg(res.msg, {icon: 0})
                    }
                }).fail(function (error) {
                    console.log(error)
                })
            }
        }

        //加载校内经历
        function loadeventdata() {
            var loadindex;
            $.ajax({
                url: ctx + "/ygssecs/getstuevent",
                type: 'POST',
                dataType: 'JSON',
                data: {stuid: student.stuid},
                beforeSend: function () {
                    loadindex = layer.load();
                }
            }).done(function (res) {
                layer.close(loadindex)
                if (res.code == 200) {
                    var eventdatas = res.data;
                    laytpl(geventypl).render(eventdatas, function (html) {
                        document.getElementById("eventrender").innerHTML = html;
                        //绑定删除函数
                        $(".readmore").bind('click', function () {
                            var eventid = parseInt($(this).attr('title'))//获取属性
                            okLayer.confirm("确定删除吗？", function () {
                                $.ajax({
                                    url: ctx + "/ygssecs/delstueventbuid",
                                    type: 'POST',
                                    dataType: 'JSON',
                                    data: {eventid: eventid},
                                    beforeSend: function () {
                                        layer.load();
                                    }
                                }).done(function (res) {
                                    layer.closeAll();
                                    if (res.code == 200) {
                                        layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                                            location.reload();
                                        })
                                    } else {
                                        layer.msg(res.msg, {icon: 0, time: 1500}, function () {
                                            location.reload();
                                        })
                                    }
                                }).fail(function (error) {
                                    console.log(error)
                                })
                            })
                        })
                    });
                } else {
                    layer.msg(res.msg, {icon: 0, time: 3000})
                }
            }).fail(function (error) {

            })
        }
    });
</script>
</html>